<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <title>FORT - 管理后台</title>
    <link href="css/styles.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"
            crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
            crossorigin="anonymous"></script>
    <script src="js/scripts.js"></script>
</head>
<body class="bg-primary">
<div id="layoutAuthentication">
    <div id="layoutAuthentication_content">
        <main>
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-5">
                        <div class="card shadow-lg border-0 rounded-lg mt-5">
                            <div class="card-header"><h3 class="text-center font-weight-light my-4">FORT - 管理后台-登录</h3></div>
                            <div class="card-body">
                                <form>
                                    <div class="form-group"><label class="small mb-1" for="username">用户名</label><input
                                            class="form-control py-4" id="username" type="text" placeholder="用户名"/>
                                    </div>
                                    <div class="form-group"><label class="small mb-1" for="password">密码</label><input
                                            class="form-control py-4" id="password" type="password" placeholder="密码"/>
                                    </div>
                                    <span id="error" style="color: red"></span>
                                    <div class="form-group d-flex align-items-center justify-content-between mt-4 mb-0"
                                         style="float:right">
                                        <button class="btn btn-primary" id="login" type="button">登录</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    <div id="layoutAuthentication_footer">
        <footer class="py-4 bg-light mt-auto">
            <div class="container-fluid">
                <div class="d-flex align-items-center justify-content-between small">
                    <div class="text-muted">© 2020 QR-Lottery-System.</div>
                </div>
            </div>
        </footer>
    </div>
</div>


<script>

    $("#login").click(function () {
        var user = {
            username: $("#username").val(),
            password: $("#password").val(),
        };
        if (user.username == '') {
            return document.getElementById("error").innerText = "请输入用户名！！！";
        }
        if (user.password == '') {
            return document.getElementById("error").innerText = "请输入密码！！！";
        }
        // console.log(user);
        $.ajax({
            url: "http://localhost:5761/lottery-system-system/user/api/user/login",
            type: "POST",
            contentType: "application/json;charset=UTF-8",
            dataType: "JSON",
            data: JSON.stringify(user),
            success: function (result) {
                // console.log(result);
                if (result.code == 200) {
                    localStorage.setItem("token", result.data.token);
                    return window.location.href = "http://localhost:90/index";
                } else {
                    return document.getElementById("error").innerText = "用户名和密码不匹配！！！";
                }
            }
        });
    });

    //绑定Enter事件
    $(function () {
        $(document).keydown(function (event) {
            if (event.keyCode == 13) {
                $("#login").click();
            }
        });
    });

</script>

</body>
</html>
